<template>
	<AppHeader :title="title" :banAnimate="true" :backgroundColor="'#ffffff'">
		<template #left>
			<img @click="onClickLeft" src="@/assets/images/icon-back-black.png" width="9" height="18" />
		</template>
	</AppHeader>
	<div class="container">
		<div class="van-hairline--bottom chapter-item" v-for="i in list" @click="handleClickItem(i)">
			<div class="title">
				<img src="@/assets/images/listening/icon-listen.png" />
				<div class="txt">{{ i.resourceName }}</div>
				<img src="@/assets/images/listening/arrow.png" />
			</div>
			<div class="tag">{{i.moduleName}}</div>
		</div>
	</div>
</template>

<script setup>
	import AppHeader from "@/components/AppHeader.vue";
	import {
		useRouter,
		useRoute
	} from "vue-router";
	import {
		ref,
		onMounted
	} from "vue";
	import {
		getBookChapterDetail,
		getMockTests
	} from "@/api/listening";

	const router = useRouter();
	const route = useRoute();

	const list = ref([]);

	const {
		id,
		pid,
		title
	} = route.query;

	const onClickLeft = () => {
		router.back();
	};

	const handleClickItem = async (i) => {
		router.push({
			path: "/listening/book-unit",
			query: {
				versionId: i.versionId,
				title: i.resourceName
			},
		});
	};

	const getChapterDetail = () => {
		getBookChapterDetail({
			id: route.query.id,
			pid: route.query.pid
		}).then(res => {
			list.value = res.data.lr
		})
	};

	onMounted(() => {
		getChapterDetail();
	});
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #ffffff;
		padding: 56px 10px 30px 10px;
		overflow-y: auto;

		.chapter-item {
			padding-bottom: 10px;
			padding-top: 10px;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.txt {
					font-size: 16px;
					flex: 1;
				}

				&>img:nth-of-type(1) {
					width: 20px;
					height: 20px;
					margin-right: 10px;
				}

				&>img:nth-of-type(2) {
					width: 7px;
					height: 12px;
				}
			}

			.tag {
				width: 68px;
				height: 20px;
				line-height: 20px;
				text-align: center;
				background: #fff2e2;
				border-radius: 6px;
				font-size: 12px;
				font-weight: bold;
				color: #ff9917;
				margin-left: 30px;
				margin-top: 10px;
			}
		}
	}
</style>